<template>
    <div class="monitoring-screen">
        <div class="module-title1 module-title-screen">
            <div class="module-title_text">监控画面</div>
            <div class="module-title_more" @click="handleScreenList">监控列表<span>></span></div>
        </div>
        <div class="monitoring-screen_module module-container">
            <Screen id="monitoring-screen_1" channelCode="1000005$1$0$73" />
        </div>
        <div class="chart-modal" v-if="isListShow">
            <div class="chart-modal_mask"></div>
            <div class="chart-modal_container">
                <div class="modal">
                <div class="modal-header">
                    <div class="modal-header_title">
                        <span>监控列表</span>
                        <div style="display: flex; alignItems: center">
                            <input type="text" v-model="searchVal" class="modal-header_title__input" placeholder="请输入" />
                            <div class="modal-header_title__search" @click="handleSearchBtn()">搜索</div>
                        </div>
                    </div>
                    <span class="modal-header_close" @click="handleClose">
                    <svg fill-rule="evenodd" viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"></path></svg>
                    </span>
                </div>
                <div class="modal-content">
                    <div class="modal-content_title">
                        <span style="width: 20%">#</span>
                        <span style="width: 40%">监控名称</span>
                        <span style="width: 40%">操作</span>
                    </div>
                    <div class="modal-content_table">
                        <div class="modal-content_table__list" v-for="(item, index) in deviceList" :key="index" :style="{background: index % 2 == 0 ? '#12242E' : 'rgba(139, 230, 225, 0.08)'}">
                            <span style="width: 20%">{{index + 1}}</span>
                            <span style="width: 40%">{{item.name}}</span>
                            <span style="width: 40%; cursor: pointer; color: #8BE6E1" @click="handleDetail(`device-${index + 1}`, item.code)">查看</span>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <ModalScreen :isShow="isShow" :id="id" :channelCode="channelCode" @handleClose="handleScreenClose" />
    </div>
</template>

<script>
import Screen from './Screen.vue';
import ModalScreen from './ModalScreen.vue'
import { getDeviceQuery } from '@/api/index.js';
export default {
  components: { Screen, ModalScreen },
  data() {
    return {
        isListShow: false,
        deviceList: [],
        ModalScreen,
        isShow: false,
        id: '',
        channelCode: '',
        dataList: [],
        searchVal: ''
    }
  },
  methods: {
    handleScreenList() {
        this.isListShow = true
    },
    handleClose() {
        this.isListShow = false
    },
    _getDeviceQuery() {
        getDeviceQuery().then((res) => {
            if (res.data) {
                this.deviceList = res.data
                this.dataList = res.data
            }
        })
    },
    handleDetail(id, code) {
        this.isShow = true
        this.id = id
        this.channelCode = code
    },
    handleScreenClose() {
        this.isShow = false
    },
    handleSearchBtn() {
        let resultList = this.dataList.filter(item => {
            return item.name.includes(this.searchVal);
        });
        this.deviceList = resultList
    }
  },
  created() {
    this._getDeviceQuery()
  }
}
</script>

<style lang="less" scoped>
.monitoring-screen {
    .monitoring-screen_module {
        width: 427px;
        height: 281px;
        margin-top: 6px;
    }
    .module-title-screen {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding-right: 15px;
        box-sizing: border-box;
        .module-title_more {
            height: 26px;
            line-height: 26px;
            font-size: 14px;
            cursor: pointer;
            span {
                display: inline-block;
                margin-left: 4px;
            }
        }
    }
}
.chart-modal_container {
    z-index: 1001 !important;
}
.modal {
    width: 650px !important;
    height: 525px !important;
    top: 160px !important;
}
.modal-header_title {
    .modal-header_title__input {
        width: 180px;
        height: 26px;
        font-size: 15px;
        margin-left: 15px;
        outline: none;
        border: none;
        padding-left: 5px;
        color: #333333;
    }
    .modal-header_title__input::placeholder {
        font-weight: 400;
        color: #CCCCCC;
    }
    .modal-header_title__search {
        width: 60px;
        height: 29px;
        line-height: 29px;
        text-align: center;
        font-size: 15px;
        background-color: #8BE6E1;
        cursor: pointer;
    }
}
.modal-content_title {
    display: flex;
    line-height: 50px;
    font-weight: 400;
    font-size: 14px;
    color: #8BE6E1;
    span {
        text-align: center;
    }
}
.modal-content_table {
    height: 400px;
    overflow-y: scroll;
    .modal-content_table__list {
        line-height: 36px;
        display: flex;
        background: rgba(139,230,225,0.08);
        border-radius: 0px 0px 0px 0px;
        font-size: 14px;
        color: #FFFFFF;
        span {
            text-align: center;
        }
    }
}
</style>